<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button v-if="hasPerm('PB_Printer.Add')" type="primary" icon="plus" @click="hanldleAdd()">新建</a-button>
      <a-button
        type="primary"
        icon="minus"
        @click="handleDelete(selectedRowKeys)"
        :disabled="!hasSelected()"
        :loading="loading"
        >删除</a-button
      >
      <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
    </div>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
<!--          <a-col :md="4" :sm="24">-->
<!--            <a-form-item label="查询类别">-->
<!--              <a-select allowClear v-model="queryParam.condition" placeholder="查询类别">-->
<!--                <a-select-option key="Code">打印机编号</a-select-option>-->
<!--                <a-select-option key="Name">打印机名称</a-select-option>-->
<!--                  <a-select-option key="TypeName">打印机类型</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="Name" placeholder="编码/名称" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
              >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="Reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      :columns="columns"
      :rowKey="row => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :bordered="true"
      size="small"
    >

      <span slot="Status" slot-scope="text, record">
        <template>
          <a-tag v-if="record.Status === 0"> 正常 </a-tag>
          <a-tag v-else-if="record.Status === 1"> 故障 </a-tag>
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a-tag v-if="record.action === 0"> 正常 </a-tag>
          <a-tag v-else-if="record.action === 1"> 故障 </a-tag>
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="hasPerm('PB_Printer.Edit')" @click="handleEdit(record.Id)">编辑</a>
          <a-divider type="vertical" />
          <a v-if="hasPerm('PB_Printer.Delete')" @click="handleDelete([record.Id])">删除</a>
        </template>
      </span>
       <template slot="dataIndex" slot-scope="text, record, index">
      <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
    </template>
    </a-table>
    <edit-form ref="editForm" :parentObj="this"></edit-form>
  </a-card>
</template>

<script>
import EditForm from './EditForm'
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '50px',
    scopedSlots: { customRender: 'dataIndex' }
  },
  { title: '打印机编号', dataIndex: 'Code' },
  { title: '打印机名称', dataIndex: 'Name' },
  { title: '隶属组织', dataIndex: 'DepartmentName' },
  { title: '类型', dataIndex: 'TypeName',  },
  // { title: '关联工作站', dataIndex: 'WorkStationName' },
  { title: '打印机ip地址', dataIndex: 'IP' },
  { title: '打印机Mac地址', dataIndex: 'Mac' },
  { title: '备注', dataIndex: 'Remarks' },
  // { title: '当前状态', dataIndex: 'Status', scopedSlots: { customRender: 'Status' }  },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
]

export default {
  components: {
    EditForm
  },
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
          defaultCurrent: 1,
        onChange: this.onPageChange.bind(this)
      },
      filters: {},
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      columns,
      queryParam: [],
      selectedRowKeys: [],
      Name: ''
    }
  },
  methods: {
    Reset() {
      this.Name = ''
      this.queryParam = []
      this.pagination.current = 1
      this.pagination.pageSize = 25
      this.getDataList()
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    getDataList() {
      this.selectedRowKeys = []
      this.queryParam = [{ Condition: 'Name', Keyword: this.Name }]
      this.loading = true
      this.$http
        .post('/PB/PB_Printer/GetPrinterDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
     onPageChange (current) {
     this.pagination.current = current
},
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    hanldleAdd() {
      this.$refs.editForm.openForm(null, '新增打印机')
    },
    handleEdit(id) {
      this.$refs.editForm.openForm(id, '编辑打印机')
    },
    handleDelete(ids) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return new Promise((resolve, reject) => {
          this.$http.post('/PB/PB_Printer/DeleteData', ids).then(resJson => {
            resolve()

            if (resJson.Success) {
              this.$message.success('操作成功!')

              this.getDataList()
            } else {
              this.$message.error(resJson.Msg)
            }
          })
        }).catch(() => console.log('Oops errors!'))
      })
    }
  }
}
</script>
